<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>PANEO PAGES</title>
<%include file="_head.html"/>

<link rel="stylesheet" href="/_paneo/common/codemirror/lib/codemirror.css">
<script src="/_paneo/common/codemirror/lib/codemirror.js"></script>
<script src="/_paneo/common/codemirror/mode/xml/xml.js"></script>
<script src="/_paneo/common/codemirror/mode/javascript/javascript.js"></script>
<script src="/_paneo/common/codemirror/mode/css/css.js"></script>
<script src="/_paneo/common/codemirror/mode/htmlmixed.js"></script>
<style>
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
.CodeMirror-scroll {
  overflow: auto;
  height: auto; overflow: visible;
  position: relative;
  outline: none;
  height: 600px;
}
</style>
</head>
<body>

<div class="navbar navbar-fixed-top">
<%include file="_header.html" />
</div>

<div class="container-fluid">

<div class="row-fluid">

<div class="span2">
<!--Sidebar content-->
    <%include file="_sidebar.html" />
</div>
<div class="span10">
    <div id="content">
        %if id:
        <%include file="_tabmenu.html" />
        %endif

        <h1>PANEO PAGES
        %if mode == 'view':
        %if scfg.get('PAGEMAKE') == 'CMS' :
        <a href="/paneo/pages/new/" class="btn" style="margin-left:30px;">新しいPAGEの追加</a>
        %endif
        %else:
        <a href="/paneo/pages/" class="btn" style="margin-left:30px;">一覧に戻る</a>
        %endif
        </h1>
        %if mode == 'view' :

        <%include file="_page_list.html" args="edit='pages'"/>

        %if scfg.get('PAGEMAKE') == 'HTML':
        <div>
        <span class="label label-warning">NG</span>のテンプレートファイルはftpで${PANEO_SITE_DIR}へアップロードしてください。
        </div>
        %endif

        %endif:
        <!-- form -->
        %if id :
        <form class="form-horizontal"  enctype="multipart/form-data" method="POST">
        <fieldset>
        %if mode == "edit":
        <legend>PAGE設定の編集
        
        %if scfg.get('PAGEMAKE') == 'CMS':
        <a href="/${id}.html" target="_blank" class="icon-share-alt">
        <span class="label">
        ページ表示
        </span>
        </a>
        %else:
        %if v.get('TEMPLATE') == 'OK':
        <a href="/${id}.html" target="_blank" class="icon-share-alt">
        <span class="label">
        ページ表示
        </span>
        </a>
        %endif
        %endif
        
        </legend>
        %else:
        <legend>新規 PAGEの追加</legend>
        %endif


            <div class="control-group">
                <label class="control-label" for="FILENAME">HTMLファイル名</label>
                <div class="controls">
                <input type="text" class="input-small ${'disabled' if id=='index' else ''}"  ${'disabled=""' if id=='index' else ''} id="FILENAME" name="FILENAME" value="${id}">
                %if id == "index":
                <p class="help-block">indexは編集できません <span class="label label-warning">半角英数字で記号や先頭文字が数値はNG</span></p>
                %endif
                %if web.ctx.get('MSG') :
                <br>
                <span class="label label-important">※${web.ctx.get('MSG')}</span>
                %endif
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="IDX">表示順</label>
                <div class="controls">
                <input type="text" class="input-small ${'disabled' if id=='index' else ''}"  ${'disabled=""' if id=='index' else ''} id="IDX" name="IDX" value="${pages.get(id).get('IDX')}">
                %if id == "index":
                <p class="help-block">indexの表示順は編集できません</p>
                %endif 
                </div>
            </div>

            %if id != 'index':
            <div class="control-group">
                <label class="control-label">PAGEタイプ</label>
                <div class="controls">
                <label class="radio">
                <input id="TYPE1" type="radio" ${'checked=""' if pages.get(id).get('TYPE') == 'MENU' else ''} value="MENU" name="TYPE">
                メニューに含むページ
                </label>
                <label class="radio">
                <input id="TYPE2" type="radio"  ${'checked=""' if pages.get(id).get('TYPE') == 'PAGE' else ''} value="PAGE" name="TYPE">
                単独ページ
                </label>
                <label class="radio">
                <input id="TYPE3" type="radio"  ${'checked=""' if pages.get(id).get('TYPE') == 'SUBMENU' else ''} value="SUBMENU" name="TYPE">
                サブメニュー
                </label>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="PARENT">親ページ</label>
                <div class="controls">
                <select id="PARENT" name="PARENT">
                <option value="">-- SELECT --</option>
                %for k,v in sorted(pages.items(),key=lambda x:int(x[1].get('IDX'))):
                %if k != id and k != 'index' and v.get("PARENT") == "":
                <option ${'selected' if k == pages.get(id).get('PARENT') else '' }>${k}</option>
                %endif
                %endfor
                </select>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="DLINK">ダイレクト リンクURL</label>
                <div class="controls">
                <input type="text" class="input-xlarge span5" id="LINK" name="LINK" value="${pages.get(id).get('LINK')}">
                <p class="help-block">直リンクの場合にURLを指定します</p>
                </div>
            </div>
            %endif

            %if id == "index":
            <input type="hidden" name="VIEWED" value="1">
            %else:
            <div class="control-group">
            <label class="control-label" for="VIEWED">公開設定</label>
            <div class="controls">
            %for k,v in sorted(VIEWED.items()):
            <input type="radio" name="VIEWED" value="${k}" ${"checked" if k == str(pages.get(id).get('VIEWED')) else ""}>${v}
            %endfor
            </div>
            </div>
            %endif

            <div class="control-group">
                <label class="control-label" for="TITLE">ページタイトル</label>
                <div class="controls">
                <input type="text" class="input-xlarge span6" id="TITLE" name="TITLE" value="${pages.get(id).get('TITLE')}">
                <p class="help-block"></p>
                </div>
            </div>

            <hr>


            %if mode=="edit":
            <% img_alt = ( pages.get(id).get('IMG') if pages.get(id).get('IMG') else {} ) %>
            %for i in range(1,4):
            <div class="control-group">
            <label class="control-label" for="simg${i}">
            ページ共通画像${i}
            <div>
            %if page_img[ 'page_%s_img%s_file' % (id,i) ][0] : 
            <img src="//${web.ctx.host}/${PANEO_SITE_DIR}/img/page_${id}_img${i}">
            %endif
            </div>
            name:page_${id}_img${i}
            </label>
            <div class="controls">
            <span class="label help-block">画像 FILE UPLOAD</span> 
            <input type="file" id="page_${id}_img${i}_file" name="page_${id}_img${i}_file" size="20"><br>
            <input type="checkbox" id="page_${id}_img${i}_file_del" name="page_${id}_img${i}_file_del" value="True">
            <span class="help-inline">
            アップロードした画像を削除する場合はチェックしてください。 
            </span>
            <span class="label help-block">画像代替えテキスト</span> 
            <input type="text" id="page_${id}_img${i}_alt" name="page_${id}_img${i}_alt" class="input-xlarge" style="width:98%;" value="${img_alt.get('page_%s_img%s_alt'%(id,i)) if img_alt.get('page_%s_img%s_alt'%(id,i)) else ""}">
            %if page_img[ 'page_%s_img%s_file' % (id,i) ][0] : 
            <% t = '<div class="paneoimg"><img src="%s" alt="%s"></div>' % ( '$'+"{paneoimg('"+(page_img['page_%s_img%s_file' %( id, i )][1]).replace('/img/','') +")'}" , img_alt.get('page_%s_img%s_alt'%(id,i)) ) %> 
            <span class="label help-block">テンプレート画像タグ</span> 
            <pre>${ t| h }</pre>
            %endif
            </div>
            </div>
            <hr>
            %endfor
            %endif

            <!-- TEMPLATE -->
            %if id == 'index':
            <input type="hidden" name="TEMPLATE" value="index"/>
            <div><b>indexページはテンプレート切り替えを行いません。</b></div>
            %else:
            <div class="control-group">
            <%include file="_templatefile.html" args="temp_type='page',temp_prefix=PAGE_TEMPLATE_SET,page=pages.get(id,{})"/>
            </div>
            %endif

            %if mode=="edit" and pages.get(id).get('TEMPLATE_SYSTEM_USE') == False:
            <h3>PANEO HTML TEMPLATE</h3>
            <textarea id="HTMLTEMPLATE" name="HTMLTEMPLATE" class="input-xlarge" >${html_file|h}</textarea>
            %if id == 'index':
            <span class="help-inline">FILE: /${PANEO_SITE_DIR}/${id}.html</span>
            %else:
            <span class="help-inline">FILE: /${PANEO_SITE_DIR}/pages/${id}.html</span>
            %endif
            %endif
            

            <div class="form-actions">
                <button class="btn btn-primary" type="submit">更新する</button>
                <button class="btn" type="reset" style="margin-left:20px;">Cancel</button>
                %if id != "index" and scfg.get('PAGEMAKE') == 'CMS':
                %if int(pages.get(id).get('VIEWED')) == 3:
                <button class="btn btn-danger" name="PAGE_DELETE" style="margin-left:50%;">削除する</button>
                %endif
                %endif
            </div>
        </fieldset>
        </form>
        %endif
    </div><!--/div#content row span-->
</div>

</div><!--/row-->

</div><!--/container-fluid"-->

<hr>

<%include file="_footer.html" />

</div><!--/.fluid-container-->

<script>
var editor = CodeMirror.fromTextArea(document.getElementById("HTMLTEMPLATE"), {
    mode: 'text/html',
    tabMode: 'indent',
    lineNumbers: true,
    matchBrackets: true,
    indentUnit: 4,
    smartIndent: false,
    indentWithTabs: true,
    enterMode: 'flat',
    electricChars: false,
    lineWrapping: true,
});
</script>

</body>
</html>


